import { defineComponent, onMounted, ref } from 'vue'
import Player from '@/components/player/player.tsx'
import Layout from './com/layout/layout.tsx'
import Aside from './com/aside/aside.tsx'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'overview-view',
  props: {},
  setup(props, { slots }) {
    const videoList = ref<{ id: string; url: string; name: string }[]>([])
    const queryData = ref({
      page: 1,
      pageSize: 9,
      total: 0,
      layout: 9,
    })
    const findVideoList = () => {
      videoList.value = []
      for (let i = 0; i < queryData.value.layout; i++) {
        videoList.value.push({
          id: `${i}`,
          url: 'http://218.109.64.68:8078/mp4/pull/14312341234.mp4',
          name: `监控视频${i}`,
        })
      }
    }
    const router = useRouter()
    const onConfigHandle = () => {
      console.log('onConfigHandle')
      router.push({name:'dashboard' })
    }
    const onCurrentHandle = (data: number) => {
      queryData.value.layout = data
      findVideoList()
    }
    onMounted(findVideoList)
    return () => (
      <Layout
        onCurrent={onCurrentHandle}
        onConfig={onConfigHandle}
        v-slots={{
          default: () => <Player layout={`${queryData.value.layout}`} list={videoList.value} />,
          aside: () => <Aside />,
        }}
      />
    )
  },
})
